<template>
  <div class="rank">
    <div class="main-con">
      <div class="con-l">
        <div class="con-l-header">
          <div class="wrap">
            <span v-for="(tabTitle, index) in tabList" :key="tabTitle.name" :class="{active: index===currentIndex}" @click="tabClick(index)">{{ tabTitle.name }}</span>
          </div>
        </div>
        <div v-if="tabList[0]" class="con-l-body">
          <ConLItem v-for="item in tabList[currentIndex].list" :key="item.id" :bodyItem="item" />
        </div>
      </div>
      <div class="con-r">
        <div class="title">
          <div class="title-content">{{ tabTitle }}</div>
          <div class="title-time">更新时间：{{ currentTime }}</div>
        </div>
        <div class="button">
          <button class="playAll"> <i class="iconfont icon-24gl-play" /> 播放全部</button>
          <button class="add"> <i class="iconfont icon-zengjia" /> 添加</button>
          <button class="like"> <i class="iconfont icon-aixin" /> 收藏</button>
          <button class="pinglun"> <i class="iconfont icon-duihuaxinxi" /> 评论</button>
        </div>
        <div class="rank-content">
          <div class="header">
            <div class="index">序号</div>
            <div class="song">歌曲</div>
            <div class="singer">歌手</div>
            <div class="card">专辑</div>
            <div class="time">时长</div>
          </div>
          <div class="body">
            <div
              v-for="(song,index) in rankSong"
              :key="song.musicrid"
              class="body-item"
              @mouseenter="showIcon(index)"
              @mouseleave="hiddenIcon(index)"
            >
              <div class="index">
                <div>{{ index > 2? index+1 : '' }}</div>
                <img :src="song.albumpic" alt="">
              </div>
              <div class="song">{{ song.name }}</div>
              <div class="singer">{{ song.artist }}</div>
              <div class="card">{{ song.album }}</div>
              <div class="time" :style="{display: moveIndex === index ? 'none' : 'block'}">{{ song.songTimeMinutes }}</div>
              <div class="icon" :style="{display: moveIndex === index ? 'block' : 'none'}">
                <!-- <i
                  class="iconfont icon-play"
                  @click="playSong(song.albumid,index)"
                /> -->
                <i
                  class="iconfont icon-play"
                  @click="playSong(song, index)"
                />
                <i class="iconfont icon-zengjia" />
                <i class="iconfont icon-aixin" />
                <i class="iconfont icon-xiazai" />
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="300"
          :page-size="30"
          @current-change="handleCurrentChange"
        />
        <div ref="comment" class="comment">
          <div class="header">
            <span class="title">热门评论</span>
            <span class="total">64条</span>
          </div>
          <div class="body">
            <div v-for="item in commentList" :key="item.id" class="item">
              <img class="avatar" :src="item.u_pic" alt="">
              <div class="right">
                <p class="nickname">{{ item.u_name }}</p>
                <p class="content">{{ item.msg }}</p>
                <p class="time">{{ item.time }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="rec_comment comment">
          <div class="header">
            <span class="title">最新评论</span>
            <span class="total">2801条</span>
          </div>
          <div class="body">
            <div v-for="item in recCommentList" :key="item.id" class="item">
              <img class="avatar" :src="item.u_pic" alt="">
              <div class="right">
                <p class="nickname">{{ item.u_name }}</p>
                <p class="content">{{ item.msg }}</p>
                <p class="time">{{ item.time }}</p>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="300"
          :page-size="30"
          @current-change="handleCurrentChange2"
        />
      </div>
    </div>
    <audio ref="audio" class="audio" :src="songUrl" autoplay="true" controls />
    <Player :currentSongTime="currentSongTime" :song="song" :isPlay="playState" @changeType="changeType" @sendScale="val=> scale = val" />
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import ConLItem from './components/ConLItem'
export default {
  name: 'Rank',
  components: {
    ConLItem
  },
  data() {
    return {
      // tabList:[],
      currentIndex: 0, // 左边tab标题index
      currentTime: '2022-05-21', // 今日时间
      tabTitle: '酷我飙升榜', // 榜单标题
      rankId: null, // 排行榜ID
      songUrl: null, // 歌曲URL
      moveIndex: 0, // 鼠标移入的歌曲下标
      commentList: [], // 最新评论列表
      recCommentList: [], // 最让热评论列表
      playState: false, // 歌曲播放状态
      playIndex: 0, // 歌曲播放下标
      song: null, // 当前播放歌曲的信息
      currentSongTime: 0, // 当前播放时长
      scale: null, // 歌曲播放比例
      duration: 0 // 当前播放歌曲总时长
    }
  },
  computed: {
    ...mapState('rank', ['tabList', 'rankSong'])
  },
  watch: {
    scale(val) {
      // console.log(this.$refs.audio.duration)
      this.$refs.audio.currentTime = val * this.duration
      this.$refs.audio.play()
      this.playState = true
    }
  },
  async mounted() {
    // 切换播放状态
    this.$bus.$on('triggerPlay', (val) => {
      this.playState = val
      if (this.playState) {
        this.$refs.audio.getAttribute('src') ? this.$refs.audio.play() : this.playSong(this.rankSong[0], 0)
      } else {
        this.$refs.audio.pause()
      }
    })
    // 获取最新评论数据
    this.getCommentList()
    // 获取最热评论数据
    this.getRecCommentList()
    // 获取tabTitle
    this.$bus.$on('tabTitle', (value) => {
      this.tabTitle = value
    })
    await this.getTabList()
    this.rankId = this.tabList[0].list[0].sourceid
    this.getRankSong({ bandId: this.rankId })
    this.$bus.$on('getRankId', (val) => {
      this.rankId = val
    })
  },
  methods: {
    // 切换歌曲
    changeType(type) {
      if (type === 'pre') {
        this.playIndex--
        const song = this.rankSong[this.playIndex]
        // const res = await this.$API.rank.reqGetSongUrl(id, 'music')
        this.playSong(song, this.playIndex)
      } else {
        this.playIndex++
        const song = this.rankSong[this.playIndex]
        // const res = await this.$API.rank.reqGetSongUrl(id, 'music')
        this.playSong(song, this.playIndex)
      }
    },
    // 获取最热评论数据
    async getRecCommentList(page) {
      const res = await this.$API.rank.reqGetCommentList('get_rec_comment', page)
      this.recCommentList = res.rows
    },
    // 获取最新评论数据
    async getCommentList(page) {
      const res = await this.$API.rank.reqGetCommentList('get_comment', page)
      this.commentList = res.rows
    },
    // 鼠标移出显示时间
    hiddenIcon() {
      this.moveIndex = null
    },
    // 鼠标移入显示icon
    showIcon(index) {
      this.moveIndex = index
    },
    // 点击播放歌曲
    async playSong(song, index) {
      const id = song.albumid
      this.duration = song.duration
      const res = await this.$API.rank.reqGetSongUrl(id, 'music')
      const codeFn = {
        200: () => {
          this.playState = true
          this.playIndex = index
          this.songUrl = res.data.url
          this.song = song
          this.$message.success('正在播放')
          // 监听播放时间
          this.$refs.audio.ontimeupdate = () => {
            // console.log(this.$refs.audio.currentTime)
            this.currentSongTime = this.$refs.audio.currentTime
          }
        },
        '-1': () => {
          this.$message('该歌曲为付费内容，请下载酷我音乐客户端后付费收听')
        },
        '-1001': () => {
          this.$message.error('歌曲已下线')
        }
      }
      codeFn[res.code]()
      // if (res.code === 200) {
      //   this.playState = true
      //   this.playIndex = index
      //   this.songUrl = res.data.url
      //   this.$message.success('正在播放')
      // } else {
      //   this.$message.error('歌曲已下线')
      // }
    },
    // 分页功能
    handleCurrentChange(val) {
      console.log(val)
      this.getRankSong({ bandId: this.rankId, pn: val })
      window.scrollTo(0, 0)
    },
    handleCurrentChange2(val) {
      // 获取最新评论数据
      this.getCommentList(val)
      // 获取最热评论数据
      this.getRecCommentList(val)
      this.$refs.comment.scrollIntoView()
    },
    ...mapActions('rank', ['getTabList']),
    tabClick(index) {
      this.currentIndex = index
    },
    ...mapActions('rank', ['getRankSong'])
  }
}
</script>

<style lang="less" scoped>
  .rank {
    overflow: hidden;
    .main-con {
      display: flow-root;
      .con-l {
        float: left;
        width: 243px;
        .con-l-header {
          padding: 20px 20px 14px 20px;
          .wrap {
            width: 172px;
            height: 36px;
            display: flex;
            justify-content: space-between;
            padding-bottom: 13px;
            border-bottom: 1px solid #f2f2f2;
            font-size: 16px;
            color: #333;
            span {
              cursor: pointer;
              &.active {
              font-weight: bold;
              position: relative;
                &::after{
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  z-index: -1;
                  content: '';
                  height:6px;
                  width: 32px;
                  background-color: #ffdf1f;
                }
              }
            }

          }
        }
      }
      .con-r {
        float: right;
        width: 980px;
        .title {
          display: flex;
          padding: 20px 0;
          align-items: flex-end;
          .title-time{
            margin-left: 10px;
            color: #999;
            font-size: 14px;
          }
          .title-content{
            font-size: 38px;
            font-weight: bold;
          }
        }
        .button {
          margin-bottom: 25px;
          button {
            margin-right: 10px;
            &.playAll {
              width: 150px;
              height: 40px;
              border-radius: 20px;
              border-style: none;
              background-color: #ffe12c;
            }
            &.add, &.like, &.pinglun {
              width: 118px;
              height: 40px;
              border-radius: 20px;
              border-style: none;
            }
          }
        }
        .rank-content{
          .header {
            display: flex;
            align-items: center;
            height: 46px;
            font-size: 14px;
            color: #999;
            background-color: #fafafa;
          }
          .body-item {
            display: flex;
            align-items: center;
            height: 70px;
            font-size: 14px;
            color: #333;
            background-color: #fafafa;
            &:nth-child(odd) {
              background-color: #fff;
            }
            &:hover {
              background-color: #f5f5f5;
            }
            &:first-child {
              .index {
                div {
                  background: url(https://h5static.kuwo.cn/www/kw-www/img/icon_first.df06fb1.png) center no-repeat;
                  background-size: 168%;
                }
              }
            }
            &:nth-child(2) {
              .index {
                div {
                  background: url(https://h5static.kuwo.cn/www/kw-www/img/icon_secondary.d99e73e.png) center no-repeat;
                  background-size: 168%;
                }
              }
            }
            &:nth-child(3) {
              .index {
                div {
                  background: url(https://h5static.kuwo.cn/www/kw-www/img/icon_third.8abbb65.png) center no-repeat;
                  background-size: 168%;
                }
              }
            }
            .icon {
              font-size: 25px;
              width: 170px;
              padding: 0 10px 0 50px;
              color: #666;
              display: flex;
              justify-content: space-between;
              i {
                margin-right: 20px;
              }
            }
          }
          .index {
            flex-shrink: 0;
            width: 216px;
            padding-left: 28px;
            padding-right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #333;
            font-weight: bold;
            box-sizing: border-box;
            div {
              width: 20px;
              height: 33px;
              line-height: 33px;
              text-align: center;
            }
            img {
              width: 54px;
              height: 54px;
            }
          }
          .song{
            flex-shrink: 0;
            width: 273px;
          }
          .singer {
            flex-shrink: 0;
            color: #666;
            width: 175px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-right: 10px;
          }
          .card{
            color: #666;
            width: 253px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .pagination {
          text-align: center;
          margin: 48px 0;
          /deep/ .el-pager {
            .number, .more {
              width: 42px;
              height: 42px;
              text-align: center;
              line-height: 42px;
              color: #333;
              background-color: transparent;
            }
            .number.active {
              background-color: rgb(255, 223, 31);
            }
          }
          /deep/ .btn-prev,
          /deep/ .btn-next{
            width: 42px;
            height: 42px;
            text-align: center;
            line-height: 42px;
            background-color: transparent;
          }
        }
        .rec_comment {
          margin-top: 20px;
        }
        .comment{
          .header {
            height: 34px;
            color: #333;
            .title {
              display: inline;
              font-size: 22px;
              padding: 0;
              margin-right: 20px;
              font-weight: bold;
            }
            .total {
              font-size: 14px;
            }
          }
          .body {
            .item {
              padding: 20px 0;
              display: flex;
              .avatar {
                margin-right: 15px;
                width: 42px;
                height: 42px;
                border-radius: 50%;
              }
              .right {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 70px;
                color: #333;
                font-size: 14px;
                padding-bottom: 20px;
                border-bottom: 1px solid #f2f2f2;
                .nickname {
                  font-weight: 700;
                }
                .time {
                  opacity: .5;
                }
              }
            }
          }
        }
      }
    }
    .audio {
      position: fixed;
      bottom: 330px;
      left: 10%;
      display: none;
    }
  }
</style>
